<template>
    <div class="wrapper-course">
        <header class="header">
            <p>
                <van-icon name="arrow-left" class="icon" @click="out"/>
                课程详情
                <van-icon name="more-o" class="icon2"/>
            </p>
        </header>

        <div class="titles">
            <p class="headline">{{this.info.title}}</p>
            <p class="price"><van-icon name="points"  />{{this.info.price==0 ? '免费' : this.info.price}}</p>
            <p class="content">共{{this.info.is_free}}课时 | {{this.info.sales_num}}人已报名</p>
        </div>

        <div class="team">
            <p class="title">教学团队</p>
            <ul>
                <li v-for="(item,index) in teacher" ::key="index">
                    <img :src="item.avatar"/>
                    <p>{{item.teacher_name}}</p>
                </li>
            </ul>
        </div>
        <div class="introduce">
            <p class="title">课程介绍</p>
            <p class="content" v-html="info.course_details"></p>
        </div>
        <div class="introduce">
            <p class="title">课程大纲</p>
            <p class="content">{{info.title}}</p>
        </div>

        <div class="comment">
            <p>课程评论</p>
            <van-empty description="暂无数据，敬请期待~" />
        </div>
        <van-button class="btn" type="warning">立即报名</van-button>
    </div>
</template>

<script>
import { courceDetailList } from "../request/http.js";
export default {
  data() {
    return {
      info: {},
      course: [],
      teacher: []
    };
  },
  mounted() {
    // console.log(this.$route.query.id);
    courceDetailList(this.$route.query.id).then(res => {
      this.info = res.data.data.info;
      this.course = res.data.data.recommendCourse;
      this.teacher = res.data.data.teachers;
      console.log(this.info);
      console.log(this.course);
      console.log('111',this.teacher);
    });
  },
  methods: {
      out(){
          this.$router.go(-1)
      }
  }
};
</script>

<style lang="scss" scoped>
.wrapper-course {
    width: 100%;
  margin-bottom: 1.45rem;
  .header {
    width: 100%;
    height: 1rem;
    line-height: 1rem;
    background: #ffffff;
    border-bottom: 0.01rem solid #eee;
    position: fixed;
    top: 0;
    left:0;
    z-index: 999;
    p {
      width: 100%;
      text-align: center;
      font-size: 0.4rem;

      .icon {
        float: left;
        line-height: 1rem;
        font-size: 0.5rem;
        margin-left: 0.2rem;
      }
      .icon2 {
        float: right;
        line-height: 1rem;
        font-size: 0.5rem;
        margin-right: 0.2rem;
      }
    }
  }
  .titles{
      width: 100%;
      height:2.5rem;
      background: #ffffff;
      margin-top: 1rem;
      box-sizing: border-box;
      padding: 0 .5rem;
      padding-top: .1rem;
      .headline{
          font-size: .4rem;
      }
      .price{
          color: orange;
          font-size: .4rem;
          margin-top: .3rem;
      }
      .content{
          font-size: .35rem;
          margin-top: .25rem;
      }
  }
  .team{
      width: 100%;
      
      background: #ffffff;
      margin-top: .8rem;
      overflow: hidden;
      box-sizing: border-box;
      padding:.4rem;
      .title{
          font-size: .4rem;
          margin-top: .2rem;
      }
      ul{
          list-style: none;
          height: 1.5rem;
          display: flex;
        text-align: center;
        margin-top: .2rem;
          li{
             margin-left: .2rem;
              img{
                  width: 1rem;
                  height: 1rem;
                  border-radius: 50%;
              }
              
          }
      }
  }
  .introduce{
      width: 100%;
      
      background: #ffffff;
      margin-top: 1rem;
      box-sizing: border-box;
      padding:.3rem;
      .title{
          font-size: .4rem;
      }
      .content{
          margin-top: .2rem;
          color: #aaa;;
      }
  }
  .btn{
      width: 100%;
      height: 1.5rem;
      position: fixed;
      bottom: 0;
      left: 0;
  }
  .comment{
      width: 100%;
      margin-top: 1rem;
      box-sizing: border-box;
      padding: .3rem;
      p{
          width: 100%;
          font-size: .45rem;
      }
  }
}
</style>